<!--
 * @Author: your name
 * @Date: 2020-08-10 11:14:36
 * @LastEditTime: 2020-08-10 13:53:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \devopsh:\project\QMangolia-web\src\components\HeaderTab\index.vue
-->
<template>
  <el-header class="header-wrap">
    <el-tabs v-model="activeName" @tab-click="handleTabChange">
      <el-tab-pane
        v-for="(tabItem,index) in tabList"
        :key="index"
        :label="tabItem.label"
        :name="tabItem.name"
        :class=" (isCollapse && asideWidth) ?'el-tabs__content':''"
      >
        <slot :name="tabItem.name" />
      </el-tab-pane>
    </el-tabs>
  </el-header>
</template>

<script>
export default {
  props: {
    tabName: {
      type: String,
      default: '',
    },
    tabList: {
      type: Array,
      default: () => [],
    },
    isCollapse: {
      type: Boolean,
      default: true,
    },
    asideWidth: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      activeName: this.tabName,
    };
  },
  methods: {
    handleTabChange(event) {
      this.$emit('tabChange', event);
    },
  },
};
</script>

<style scoped lang="scss">
.header-wrap {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  position: fixed;
  top: 60px;
  left: 0;
}
/deep/ .el-tabs__item {
  font-size: 16px;
}
/deep/ .el-tabs__header {
  // margin: 0 0 0 40px;
}
.el-tabs__content {
  margin-left: 240px;
}
// /deep/ .el-tabs__content {
//   margin-left: 240px;
// }
/deep/ .el-tabs__nav-wrap::after {
  z-index: 0;
}
</style>
